import { Page, test } from "@playwright/test";
import * as dotenv from "dotenv";
import path from "path";

async function zoomOut(page: Page, times: number = 4) {
  for (let i = 0; i < times; i++) {
    await page.getByTestId("zoom_out").click();
  }
}

test("should create a flow with decision", async ({ page }) => {
  test.skip(
    !process?.env?.OPENAI_API_KEY,
    "OPENAI_API_KEY required to run this test",
  );
  if (!process.env.CI) {
    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
  }
  await page.goto("/");
  await page.waitForSelector('[data-testid="mainpage_title"]', {
    timeout: 30000,
  });
  await page.waitForSelector('[id="new-project-btn"]', {
    timeout: 30000,
  });
  let modalCount = 0;
  try {
    const modalTitleElement = await page?.getByTestId("modal-title");
    if (modalTitleElement) {
      modalCount = await modalTitleElement.count();
    }
  } catch (error) {
    modalCount = 0;
  }
  while (modalCount === 0) {
    await page.getByText("New Flow", { exact: true }).click();
    await page.waitForSelector('[data-testid="modal-title"]', {
      timeout: 3000,
    });
    modalCount = await page.getByTestId("modal-title")?.count();
  }
  await page.waitForSelector('[data-testid="blank-flow"]', {
    timeout: 30000,
  });
  await page.getByTestId("blank-flow").click();

  await page.getByTestId("sidebar-options-trigger").click();
  await page.getByTestId("sidebar-legacy-switch").isVisible({ timeout: 5000 });
  await page.getByTestId("sidebar-legacy-switch").click();

  //---------------------------------- CHAT INPUT
  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("chat input");
  await page.waitForSelector('[data-testid="inputsChat Input"]', {
    timeout: 500,
  });
  await page
    .getByTestId("inputsChat Input")
    .dragTo(page.locator('//*[@id="react-flow-id"]'));
  await zoomOut(page);

  //---------------------------------- CREATE LIST
  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("list");
  await page.waitForSelector('[data-testid="helpersCreate List"]', {
    timeout: 500,
  });
  await page
    .getByTestId("helpersCreate List")
    .dragTo(page.locator('//*[@id="react-flow-id"]'), {
      targetPosition: { x: 100, y: 100 },
    });

  await page.getByTestId("input-list-plus-btn_texts-0").first().click();
  await page.getByTestId("input-list-plus-btn_texts-0").first().click();
  await page.getByTestId("input-list-plus-btn_texts-0").first().click();
  await page
    .getByTestId("inputlist_str_texts_0")
    .first()
    .fill("big news! langflow 1.0 is out");
  await page
    .getByTestId("inputlist_str_texts_1")
    .first()
    .fill("uhul that movie was awesome");
  await page.getByTestId("inputlist_str_texts_2").first().fill("love you babe");
  await page
    .getByTestId("helpersCreate List")
    .dragTo(page.locator('//*[@id="react-flow-id"]'), {
      targetPosition: { x: 300, y: 300 },
    });
  await page.getByTestId("input-list-plus-btn_texts-0").last().click();
  await page.getByTestId("input-list-plus-btn_texts-0").last().click();
  await page.getByTestId("input-list-plus-btn_texts-0").last().click();
  await page.getByTestId("inputlist_str_texts_0").last().fill("oh my cat died");
  await page
    .getByTestId("inputlist_str_texts_1")
    .last()
    .fill("No one loves me");
  await page.getByTestId("inputlist_str_texts_2").last().fill("not cool..");
  //---------------------------------- PARSE DATA
  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("parse data");
  await page.waitForSelector('[data-testid="processingParse Data"]', {
    timeout: 500,
  });
  await page
    .getByTestId("processingParse Data")
    .dragTo(page.locator('//*[@id="react-flow-id"]'), {
      targetPosition: { x: 350, y: 100 },
    });
  await zoomOut(page, 1);
  await page
    .getByTestId("processingParse Data")
    .dragTo(page.locator('//*[@id="react-flow-id"]'), {
      targetPosition: { x: 50, y: 300 },
    });
  await zoomOut(page, 2);

  //---------------------------------- PASS
  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("pass");
  await page.waitForSelector('[data-testid="logicPass"]', {
    timeout: 500,
  });
  await page
    .getByTestId("logicPass")
    .dragTo(page.locator('//*[@id="react-flow-id"]'), {
      targetPosition: { x: 400, y: 100 },
    });
  await page.waitForSelector('[data-testid="logicPass"]', {
    timeout: 500,
  });
  //---------------------------------- PASS
  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("pass");
  await page.waitForSelector('[data-testid="logicPass"]', {
    timeout: 500,
  });
  await page
    .getByTestId("logicPass")
    .dragTo(page.locator('//*[@id="react-flow-id"]'), {
      targetPosition: { x: 600, y: 200 },
    });
  await page.waitForSelector('[data-testid="logicPass"]', {
    timeout: 500,
  });
  //---------------------------------- PASS
  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("pass");
  await page.waitForSelector('[data-testid="logicPass"]', {
    timeout: 500,
  });
  await page
    .getByTestId("logicPass")
    .dragTo(page.locator('//*[@id="react-flow-id"]'), {
      targetPosition: { x: 650, y: 350 },
    });
  await page.waitForSelector('[data-testid="logicPass"]', {
    timeout: 500,
  });
  zoomOut(page, 2);
  //---------------------------------- PROMPT
  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("prompt");
  await page.waitForSelector('[data-testid="promptsPrompt"]', {
    timeout: 500,
  });
  await page
    .getByTestId("promptsPrompt")
    .dragTo(page.locator('//*[@id="react-flow-id"]'), {
      targetPosition: { x: 50, y: 150 },
    });

  //---------------------------------- OPENAI
  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("openai");
  await page.waitForSelector('[data-testid="modelsOpenAI"]', {
    timeout: 500,
  });
  await page
    .getByTestId("modelsOpenAI")
    .dragTo(page.locator('//*[@id="react-flow-id"]'), {
      targetPosition: { x: 50, y: 300 },
    });

  //---------------------------------- CONDITIONAL ROUTER
  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("if else");
  await page.waitForSelector('[data-testid="logicIf-Else"]', {
    timeout: 500,
  });
  await page
    .getByTestId("logicIf-Else")
    .dragTo(page.locator('//*[@id="react-flow-id"]'), {
      targetPosition: { x: 750, y: 150 },
    });
  //---------------------------------- CHAT OUTPUT
  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("chat output");
  await page.waitForSelector('[data-testid="outputsChat Output"]', {
    timeout: 500,
  });
  await page
    .getByTestId("outputsChat Output")
    .dragTo(page.locator('//*[@id="react-flow-id"]'), {
      targetPosition: { x: 100, y: 75 },
    });
  await page.waitForSelector('[data-testid="outputsChat Output"]', {
    timeout: 500,
  });
  //---------------------------------- CHAT OUTPUT
  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("chat output");
  await page.waitForSelector('[data-testid="outputsChat Output"]', {
    timeout: 500,
  });
  await page
    .getByTestId("outputsChat Output")
    .dragTo(page.locator('//*[@id="react-flow-id"]'), {
      targetPosition: { x: 250, y: 75 },
    });
  await page.waitForSelector('[data-testid="outputsChat Output"]', {
    timeout: 500,
  });
  //----------------------------------
  await page.getByTestId("fit_view").click();
  //---------------------------------- EDIT PROMPT
  await page.getByTestId("promptarea_prompt_template").first().click();
  await page.getByTestId("modal-promptarea_prompt_template").first().fill(`
      {Condition}
  Answer with either TRUE or FALSE (and nothing else).
  TRUE Examples:
  {true_examples}
  FALSE Examples:
  {false_examples}
  User: {user_message}
  AI:
      `);
  await page.getByText("Check & Save").last().click();
  //---------------------------------- MAKE CONNECTIONS
  await page
    .getByTestId("handle-createlist-shownode-data list-right")
    .nth(0)
    .click();
  await page.getByTestId("handle-parsedata-shownode-data-left").nth(0).click();
  await page
    .getByTestId("handle-createlist-shownode-data list-right")
    .nth(2)
    .click();
  await page.getByTestId("handle-parsedata-shownode-data-left").nth(1).click();
  await page
    .getByTestId("handle-chatinput-shownode-message-right")
    .nth(0)
    .click();
  await page
    .getByTestId("handle-pass-shownode-input message-left")
    .nth(2)
    .click();
  await page.getByTestId("handle-parsedata-shownode-text-right").nth(0).click();
  //quebrando aqui
  await page
    .getByTestId("handle-prompt-shownode-true_examples-left")
    .nth(0)
    .click();
  await page.getByTestId("handle-parsedata-shownode-text-right").nth(2).click();
  await page
    .getByTestId("handle-prompt-shownode-false_examples-left")
    .nth(0)
    .click();
  await page
    .getByTestId("handle-pass-shownode-output message-right")
    .nth(4)
    .click();
  await page
    .getByTestId("handle-prompt-shownode-user_message-left")
    .nth(0)
    .click();
  await page
    .getByTestId("handle-prompt-shownode-prompt message-right")
    .first()
    .click();
  await page
    .getByTestId("handle-openaimodel-shownode-input-left")
    .nth(0)
    .click();
  await page
    .getByTestId("handle-openaimodel-shownode-text-right")
    .nth(0)
    .click();
  await page
    .getByTestId("handle-conditionalrouter-shownode-text input-left")
    .nth(0)
    .click();
  await page.getByTestId("popover-anchor-input-match_text").fill("TRUE");
  await page.getByTestId("title-Pass").nth(1).click();
  await page.getByTestId("edit-button-modal").click();
  await page
    .getByTestId("popover-anchor-input-input_message-edit")
    .nth(0)
    .fill("You're Happy! 🤪");
  await page.getByTestId("showignored_message").last().click();
  await page.getByText("Close").last().click();
  await page.getByTestId("title-Pass").nth(0).click();
  await page.getByTestId("edit-button-modal").click();
  await page
    .getByTestId("popover-anchor-input-input_message-edit")
    .nth(0)
    .fill("You're Sad! 🥲");
  await page.getByTestId("showignored_message").last().click();
  await page.getByText("Close").last().click();
  await page
    .getByTestId("handle-conditionalrouter-shownode-true-right")
    .nth(0)
    .click();
  await page
    .getByTestId("handle-pass-shownode-ignored message-left")
    .nth(1)
    .click();
  await page
    .getByTestId("handle-conditionalrouter-shownode-false-right")
    .nth(0)
    .click();
  await page
    .getByTestId("handle-pass-shownode-ignored message-left")
    .nth(0)
    .click();
  await page
    .getByTestId("handle-pass-shownode-output message-right")
    .nth(2)
    .click();
  await page.getByTestId("handle-chatoutput-shownode-text-left").nth(0).click();
  await page
    .getByTestId("handle-pass-shownode-output message-right")
    .nth(0)
    .click();
  await page.getByTestId("handle-chatoutput-shownode-text-left").nth(1).click();
  const apiKeyInput = page.getByTestId("popover-anchor-input-api_key");
  const isApiKeyInputVisible = await apiKeyInput.isVisible();
  if (isApiKeyInputVisible) {
    await apiKeyInput.fill(process.env.OPENAI_API_KEY ?? "");
  }
  await page.getByTestId("dropdown_str_model_name").click();
  await page.getByTestId("gpt-4o-1-option").click();
  await page.getByTestId("fit_view").click();
  await page.getByText("Playground", { exact: true }).last().click();
  await page.waitForSelector('[data-testid="input-chat-playground"]', {
    timeout: 100000,
  });
  await page.getByTestId("input-chat-playground").click();
  await page
    .getByTestId("input-chat-playground")
    .fill("my dog is alive and happy!");
  await page.waitForSelector('[data-testid="button-send"]', {
    timeout: 100000,
  });

  await page.getByTestId("button-send").last().click();
});
